<template>
  <view class="mz-form">
    <view v-if="title" class="mz-form-title">
      <text>{{ title }}</text>
    </view>
    <slot></slot>
  </view>
</template>

<script>
import schema from "async-validator";
export default {
  props: {
    title: {
      type: String,
      defalut: ""
    },
    model: {
      type: Object,
      defalut() {
        return {};
      }
    },
    rules: {
      type: Object,
      defalut() {
        return {};
      }
    }
  },
  data() {
    return {};
  },
  methods: {
    validate(cb) {
      let rules = {};
      for (let key in this.model) {
        if (this.rules[key]) rules[key] = this.rules[key];
      }
      let validator = new schema(rules);
      validator.validate(this.model, (errors, fields) => {
        if (errors) {
          if (typeof cb == "function") cb(false, errors, fields);
          uni.showToast({
            icon: "none",
            title: errors[0].message
          });
        } else {
          if (typeof cb == "function") cb(true);
        }
      });
    }
  }
};
</script>

<style scoped lang="scss">
.mz-form {
  .mz-form-title {
    padding: $form-item-padding;
    font-size: $uni-font-size-base;
    color: $uni-text-color-grey;
  }
}
</style>
